<template>
    <div>
        <div class="top_background">
            <img src="../../images/left.png" alt="" onClick="javascript :history.back(-1);">
            <div class="top_table">
                <span @click="cliend = 1" :class="cliend==1?'active':''">风云榜</span>
                <span @click="cliend = 2" :class="cliend==2?'active':''">收徒榜</span>
            </div>
        </div>
        <div class="asions_list">
            <div class="rankings">
                <span @click="cliend_rank = 1" :class="cliend_rank==1?'active':''">总排行</span>
                <span @click="cliend_rank = 2" :class="cliend_rank==2?'active':''">月排行</span>
            </div>
        </div>

        <div>
            <div class="three_head">
                <transition name="fade">
                    <ul v-if="newthress.length >= 1">
                        <li v-for="(arr,index) in newthress" :class="{aa: !arr.user_mobile}">
                            <div v-if="arr">
                                <div class="three-img">
                                    <img :src="threeB[index]" alt="" class="hg">
                                    <img :src="arr.avatar" alt="" class="tx" v-if="arr.avatar">
                                    <img :src="threeA[index]" alt="" class="pm">
                                </div>
                                <p class="three-nickname">{{arr.user_mobile}}</p>
                                <p class="three-prentice" v-if="arr.total_prentice">徒弟：{{ arr.total_prentice }}</p>
                                <p class="three-money">￥{{arr.money}}</p>
                            </div>
                        </li>
                    </ul>
                </transition>
            </div>
            <!--前三名-->
            <div class="shunf">
                <div class="top_three">
                    <transition name="fade">
                        <ul v-if="arrs.length >= 1">
                            <li v-for="(arr,index) in arrs">
                                <div class="shunf_w">{{index+4}}</div>
                                <img :src="arr.avatar" alt="" v-if="arr.avatar">
                                <div class="txt">
                                    <span>{{arr.user_mobile}}</span>
                                    <p v-if="arr.total_prentice">收徒：{{ arr.total_prentice }}</p>
                                </div>
                                <span style="color:#E4635D">￥{{arr.money}}</span>
                            </li>
                        </ul>
                    </transition>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import api from '../../utils/api';

    export default {
        name: "Rankinglist",
        data: () => ({
            cliend: 1, //标识，判断是否是收徒榜，还是风云榜;默认风云榜
            cliend_rank: 1,//标识，判断是否是总排行，月排行
            arrs: [],
            newthress: [],
            url: '/earningsRank',
            threeA: [
                require('@/img_myself/three-a1.png'),
                require('@/img_myself/three-a2.png'),
                require('@/img_myself/three-a3.png'),
            ],
            threeB: [
                require('@/img_myself/three-b1.png'),
                require('@/img_myself/three-b2.png'),
                require('@/img_myself/three-b3.png'),
            ]
        }),
        mounted() {
            document.body.scrollTop = 0;
            this.datas(this.cliend_rank)
        },
        methods: {
            async datas(type) {
                var that = this;
                this.arrs = []
                this.newthress = []
                await api.request(this.url, 'get', {type: type}).then(function (res) {
                    that.arrs = res.data.data;
                    let aa = that.arrs.splice(0, 3);
                    if (aa.length == 1) {
                        aa.push('<li></li>')
                        aa.push('<li></li>')
                    } else if (aa.length == 2) {
                        aa.push('<li></li>')
                    }
                    [aa[0], aa[1]] = [aa[1], aa[0]];
                    that.newthress = aa;
                })
            }
        },
        watch: {
            cliend_rank(type) {
                this.datas(type)
            },
            async cliend(type) {
                if (type == 1) {
                    this.url = '/earningsRank';
                } else {
                    this.url = '/prenticeRank';
                }
                this.datas(this.cliend_rank)
            }
        }
    }
</script>

<style scoped="css">
    @import "../../style/rankinglist.css";
</style>
